import React, { memo, useEffect } from 'react'

import {SetterSongerWrapper} from './style';
import {
  getSizeImage
} from "@/utils/format-utils";

import ThemeHeaderSmall from '@/components/theme-header-small';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getSettleSingerAction } from '../../store/actionCreators';

export default memo(function SettleSinger() {

    const dispatch=useDispatch();

    const {settleSingers} = useSelector(state => ({
        settleSingers:state.getIn(["recommend","settleSingers"])
    }),shallowEqual)

    useEffect(()=>{
        dispatch(getSettleSingerAction());
    },[dispatch])

    return (
        <SetterSongerWrapper>
            <ThemeHeaderSmall title="入驻歌手" more="查看全部>"/>
            <div className="singer-list">
                {
                  settleSingers.map((item, index) => {
                    return (
                      <a href="/singer" key={item.id} className="item">
                        <img src={getSizeImage(item.img1v1Url, 62)} alt="" />
                        <div className="info">
                          <div className="title">{item.alias.join("") || item.name}</div>
                          <div className="name">{item.name}</div>
                        </div>
                      </a>
                    )
                  })
                }
            </div>
            <div className="apply-for">
              <a href="/abc">申请成为网易音乐人</a>
            </div>
        </SetterSongerWrapper>
    )
})
